<!--
 * @Author: 邱雪
 * @Date: 2022-01-10 10:10:43
 * @LastEditTime: 2022-01-10 10:11:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \test\src\components\login\login-detail.vue
-->
<template>
  <div
    id="login-detail"
    :isPopup="isPopup"
    :class="[isPopup ? '' : 'not-pop']"
    :style="{ backgroundColor: loginPreBtn.loginboxmainbgc }"
  >
    <div class="close-btn" v-show="isPopup" @click="handleClose">x</div>
    <div class="login-conent">
      <div class="version" v-show="loginPreBtn.showProductInfo === '1'">
        A8+集团版（并发数：100）
      </div>
      <div class="login-box">
        <div class="username">
          <span class="icon iconfont icon-zhanghao"></span>
          <input
            type="text"
            name="username"
            class="username-input"
            :value="username"
            @input="inputUserName"
            :style="{ backgroundColor: loginPreBtn.loginboxmainbgc }"
          />
        </div>
        <div class="password">
          <span class="icon iconfont icon-password"></span>
          <input
            type="password"
            name=""
            class="password-input"
            :value="password"
            @input="inputPassword"
            :style="{ backgroundColor: loginPreBtn.loginboxmainbgc }"
          />
        </div>
        <div
          class="login-btn"
          @click="handleLogin"
          :style="{ backgroundColor: loginPreBtn.loginboxbuttonbgc }"
        >
          登录
        </div>
      </div>
      <div class="fzIntall-area">
        <div class="zhixin-left find-psw">
          <a
            href="http://a82.seeyoncd.com/seeyon/personalBind.do?method=retrievePassword"
            target="_blank"
            >找回密码?</a
          >
        </div>
        <div class="zhixin-center">
          <span class="help" @click="openAssistantSetup">辅助程序</span>
          <span class="zhixin">致信</span>
        </div>
        <div class="zhixin-right language" @mouseenter="openLanguage" @mouseleave="closeLanguage">
          {{ language }}
          <ul class="language-select" v-show="languageSelect">
            <li class="simple" @mouseenter="changeBgc" @mouseleave="reBgc" @click="changeLanguage">
              中文(简体)
            </li>
            <li
              class="tradition"
              @mouseenter="changeBgc"
              @mouseleave="reBgc"
              @click="changeLanguage"
            >
              中文(繁體)
            </li>
            <li class="english" @mouseenter="changeBgc" @mouseleave="reBgc" @click="changeLanguage">
              English
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LoginDetail',
    props: {
      isPopup: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        username: '',
        password: '',
        language: '中文(简体)',
        languageSelect: false,
        openAssistantFlag: 0,
      };
    },
    computed: {
      loginPreBtn() {
        return vPortal.themeHotspots.loginPreBtn;
      },
    },
    methods: {
      // 输入用户名
      inputUserName(event) {
        this.username = event.target.value;
      },

      // 输入密码
      inputPassword(event) {
        this.password = event.target.value;
      },

      //关闭登录弹窗
      handleClose() {
        emitter.publish('close');
      },

      // 点击登录按钮
      handleLogin() {
        // 用户名账号密码不能为空判断
        if (this.username == '' || this.password == '') {
          alert('无效的用户名或密码');
          location.reload();
        }
      },

      // 国际化选框的显示与隐藏
      openLanguage() {
        this.languageSelect = true;
      },

      closeLanguage() {
        this.languageSelect = false;
      },

      //选框功能
      changeBgc(e) {
        e.srcElement.style.backgroundColor = 'rgb(216,241,253)';
      },

      reBgc(e) {
        e.srcElement.style.backgroundColor = '#fff';
      },

      changeLanguage(e) {
        this.language = e.target.textContent;
        this.languageSelect = false;
      },

      // 辅助程序
      openAssistantSetup() {
        if (this.openAssistantFlag === 0) {
          this.openAssistantFlag = 1;
          setTimeout(function () {
            this.openAssistantFlag = 0;
          }, 30000);
        } else {
          getCtpTop().$.alert("${ctp:i18n('login.label.assistantTip')}");
          return;
        }
        let myhost = window.location.host;
        let myport = window.location.port;
        // console.log(myhost, myport);
        if (myport == '') {
          myport = '80';
        }
        let ucUrl = '/' + myhost + '/' + myhost + '/' + myport;

        window.location.href = this._ctxServer + '/autoinstall.do?method=regInstallDown64';
      },
    },
  };
</script>

<style scoped>
  * {
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  #login-detail {
    /* border: 1px solid #000; */
    position: relative;
    width: 100%;
    height: 100%;
    border: solid 1px #d0dae1;
  }

  .not-pop {
    border: none !important;
  }

  .close-btn {
    position: absolute;
    top: 0;
    left: 10px;
    font-weight: bold;
    color: #2490f8;
    cursor: pointer;
  }

  .version {
    color: #333;
  }

  .login-conent {
    /* border: 1px solid #000; */
    width: 100%;
    padding: 10px;
    margin-top: 20px;
    font-size: 12px;
    text-align: left;
  }

  .login-box {
    width: 100%;
    height: 140px;
    margin-top: 10px;
  }

  .login-box > div {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    line-height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .login-btn {
    font-size: 14px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background-color: #2490f8;
  }

  .icon {
    width: 20px;
    margin: 0 5px;
  }

  input {
    border: none;
    outline: none;
  }

  .fzIntall-area {
    position: relative;
    width: 100%;
    height: 30px;
    margin-top: 10px;
    color: #999;
  }

  .fzIntall-area > div {
    display: inline-block;
    height: 30px;
    line-height: 30px;
  }

  .fzIntall-area * {
    cursor: pointer;
  }

  .find-psw {
    float: left;
  }

  .zhixin-center {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100px;
    margin-left: -50px;
    text-align: center;
  }

  .language {
    /* border: 1px solid #000;/ */
    position: relative;
    float: right;
    width: 60px;
    text-align: center;
  }

  .language-select {
    position: absolute;
    right: -5px;
    bottom: 25px;
    width: 90px;
    height: 90px;
    text-align: center;
    background-color: #fff;
    border: solid 1px #d0dae1;
    border-radius: 4px;
  }

  .language-select > li {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
</style>
